<template>
	<div class="body">
		<div class="title">绑定新手机号</div>
		<view class="content">
			<div class="li">
				<div class="title">手机号</div>
				<input type="text" placeholder="请输入手机号">
			</div>
			<div class="li">
				<div class="title">验证码</div>
				<div class="code">
					<input type="text" placeholder="请输入短信验证码">
					<div class="getcode" v-if="codeshow" @click="getcode">获取</div>
					<div class="getcode" v-else>{{code}}s</div>
				</div>
			</div>
		</view>
		<div class="btn">确认绑定</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				code: "60",
				codeshow: true
			}
		},
		onLoad() {

		},
		methods: {
		// 获取验证码
		getcode() {
			this.codeshow = false
			this.code = 60
			setInterval(() => {
				this.code--
			}, 1000)
			if (this.code == 1) {
				this.codeshow = true
				this.code = 60
			}
		}
		}
	}
</script>

<style lang="less" scoped>
	.title{
		color:#aaa;
		width: 90%;
		box-sizing: border-box;
		margin: 30rpx auto;
		font-size: 28rpx;
	}
	.content {
		width: 90%;
		box-sizing: border-box;
		margin: 30rpx auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;

		.li {
			.title {
				color: #aaa;
				margin: 20rpx;
			}

			input {
				background-color: #f5f6fa;
				padding: 20rpx;
				border-radius: 80rpx;
				text-indent: 1em;
			}

			.code {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.getcode {
					width: 160rpx;
					height: 80rpx;
					border-radius: 48rpx;
					border: 2rpx solid #FD9509;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #FD9509;
				}
			}

		}
	}

	.btn {
		width: 520rpx;
		height: 96rpx;
		background: linear-gradient(180deg, #FFBD57 0%, #FD9509 100%);
		border-radius: 48rpx;
		opacity: 0.5;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
		color: #FFFFFF;
	}
</style>